<template>
  <div class="all">
    <header>
      <div class="div" @click="back()">
        <img src="../../assets/返回.png" alt="">
        <span>返回</span>
      </div>
      <div class="div">
        <button @click="clickAdd()">新增医嘱</button>
        <button @click="clickDelete()">删除医嘱</button>
      </div>
    </header>
    <div class="content">
      <ul class="ulList" v-for="(item, index) in list" :key="index"
          @click="selectDel(index, item)">
          <li class="li_top">
              <a>{{item.ITEM_NAME}}</a>
              <a>
                <button class="stop btn" v-if="item.del_tag == 1">停</button>
                <button class="doing btn" v-else-if="item.del_tag == 0">正</button>
              </a>
          </li>
          <li>
            <span>项目分类: {{item_type[0][item.item_type.toString()]}}</span>
            <span>治疗方法: {{cure_method[0][item.cure_method.toString()]}}</span>
          </li>
          <li>
            <span>治疗频次: {{cure_rate[0][item.cure_rate.toString()]}}</span>
            <span>
              治疗时长: {{item.cure_time}}分钟
            </span>
          </li>
          <li>
            <p>治疗部位: {{item.cure_position_name}}</p>
          </li>
          <li class="stopTime">
            <p v-show="item.del_tag == 1">停嘱时间: {{item.stoped_time}}</p>
            <p v-show="item.del_tag == 0">开嘱时间: {{item.created_time}}</p>
          </li>
      </ul>
    </div>
    <van-dialog v-model="show"
                width="200px"
                confirm-button-color="#1da4f2"
                title="确定删除该医嘱吗？"
                @confirm="onConfirm()"
                show-cancel-button>
    </van-dialog>
  </div>
</template>

<script>
import $ from 'jquery'
import {Toast} from 'vant'
export default {
  name: 'DoctorAdvice',
  data () {
    return {
      show: false,
      userid: '',
      doctorid: '',
      patientid: '',
      list: [],
      item_type: [{1: 'PT项目', 2: 'OT项目', 3: 'ST项目', 4: '理疗项目', 5: '中医项目'}],
      cure_method: [{1: '手法', 2: '器械', 3: '理疗'}],
      cure_rate: [{1: '一天一次', 2: '一天两次', 3: '一天三次', 4: '两天一次'}],
      item: ''
    }
  },
  mounted () {
    // 截取网址后的userid
    this.userid = this.$utils.getUrlKey('doctorid')
    this.doctorid = this.$utils.getUrlKey('doctorid')
    this.patientid = this.$utils.getUrlKey('patientid')
    this.getList()
  },
  methods: {
    // 返回
    back () {
      this.$router.history.go(-1)
    },
    // 获取已有医嘱信息列表
    getList () {
      this.$http.listAll({
        doctor_user_id: this.doctorid,
        patient_user_id: this.patientid
      })
        .then(res => {
          console.log(res)
          this.list = res.data.data
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 新建医嘱
    clickAdd () {
      window.sessionStorage['itemId'] = ''
      window.sessionStorage['itemName'] = ''
      this.$router.push({path: '/buildDoctor', query: {doctorid: this.doctorid, patientid: this.patientid}})
    },
    // 删除医嘱
    clickDelete () {
      console.log(this.item)
      if (this.item.length <= 0) {
        Toast('请选择医嘱')
        this.show = false
      } else {
        this.show = true
      }
    },
    // 确定删除医嘱
    onConfirm () {
      this.$http.stop({id: this.item.id})
        .then(res => {
          console.log(res)
          this.item.del_tag = 1
          this.item.stoped_time = res.data.data.stoped_time
          $('.ulList').removeClass('cut')
          this.item = ''
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 选择医嘱
    selectDel (index, item) {
      if (item.del_tag === 0) {
        if ($('.ulList').eq(index).hasClass('cut')) {
          $('.ulList').eq(index).removeClass('cut')
          this.item = ''
        } else {
          this.item = item
          $('.ulList').eq(index).addClass('cut').siblings().removeClass('cut')
        }
      } else {
        Toast('该医嘱已停用')
      }
    }
  }
}
</script>

<style scoped>
  .all{
    width: 100%;
    height: 100vh;
    background: #FAF9FE;
  }
  header{
    width: 100%;
    background: #FFFFFF;
    height: 12vw;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
  }
  header .div{
    width: 50%;
    display: flex;
    align-items: center;
    font-size: 15px;
    color: #1da4f2;
    font-weight: bold;
    font-family: "PingFang SC";
  }
  header .div img{
    width: 7px;
    height: 13px;
    margin: 0 5px 0 15px;
  }
  header .div:nth-child(2) {
    justify-content: flex-end;
  }
  header button{
    border: none;
    margin-right: 10px;
    background: #FFFFFF;
  }
  .ulList{
    width: 100%;
    background: #FFFFFF;
    margin-top: 5px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }
  .ulList li {
    width: 95%;
    display: flex;
    padding: 5px;
    box-sizing: border-box;
    font-size: 13px;
    font-weight: 500;
    font-family: "PingFang SC";
  }
  .ulList li  span{
    display: block;
    width: 50%;
  }
  .li_top{
    height: 45px;
    color: #333333;
    align-items: center;
    font-size: 15px !important;
  }
  .li_top a{
    display: block;
  }
  .li_top a:nth-child(1){
    width: 90%;
  }
  .li_top a:nth-child(2){
    width: 20%;
    display: flex;
    justify-content: flex-end;
  }
  .btn{
    width: 29px;
    height: 29px;
    border-radius: 2px;
    border: none;
    font-size: 15px;
    font-weight: 500;
    margin-left: 5px;
  }
  .stop{
    background: rgba(227, 23, 13, 0.1);
    color: #E3170D;
  }
  .doing{
    color: #1DA4F2;
    background: rgba(29, 164, 242, 0.2);
  }
  .stopTime, startTime{
    color: #999999;
    font-size: 13px !important;
    height: 44px;
    display: flex;
    align-items: center;
  }
  .cut{
    background: rgba(29, 164, 242, 0.2) !important;
  }
</style>
